import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './registration.css'
import { AtCard,AtButton,AtList, AtListItem,AtFloatLayout,AtTabs, AtTabsPane } from "taro-ui"
import {$navigateTo,getGlobalData } from '../../../global'
import app from '../../../main.js'

export default class Registration extends Component {

  config = {
    navigationBarTitleText: '挂号'
  }
  constructor(){
      super(...arguments);
      this.state={
          isOpened:false,
          current: 0
      }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }
  onClick() {
    this.setState({
        isOpened: true
    })
  }
  zhifu=()=>{
    $navigateTo("../chooseconsultation/chooseconsultation?type=registration")
  }
  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    const tabList = [{ title: '01月22日 周二' }, { title: '01月23日 周三' }, { title: '01月29日 周二' }]
    return (
      <View className='registration'>
        <AtList className='list' hasBorder={false}>
          <AtListItem hasBorder={false} title='弦紫萱 主任医师' note='广东虚构医院 骨科' thumb={getGlobalData('baseurl')+'img/d2.jpg'} extraText='￥200/次' />
        </AtList> 
        <AtCard
            className='card'
            title='预约条件'
            thumb={getGlobalData('baseurl')+'img/yuyuetiaojian.png'}
            >
            <Text>髌骨骨折、尺神经损伤、先天性髋内翻、断指再植、趾间神经痛、距骨后外结节骨折、\n 髌骨骨折髌骨骨折拇指再造、先天性胫骨缺如、僵鉧、感染性肋软骨炎均可以找本人治病</Text>
        </AtCard>
        <AtCard
            className='card card-two'
            title='最近预约患者'
            thumb={getGlobalData('baseurl')+'img/zuijinyuyue.png'}
            >
            <AtList className='list-box' hasBorder={false}>
              <AtListItem className='list-text' hasBorder={false} title='王** 广东梅州 ' />
              <AtListItem className='list-text' hasBorder={false} title='所患疾病：骨质疏松'  />
              <AtListItem className='list-text' hasBorder={false} title='病情描述：走路感觉很不稳，有疼痛感走路感觉很不稳，有疼痛感走路感觉很不稳，有疼痛感走路感觉很不稳，有疼痛感走路感觉很不稳，有疼痛感'  />
            </AtList> 
            <AtList className='list-box' hasBorder={false}>
              <AtListItem className='list-text' hasBorder={false} title='王** 广东梅州 ' />
              <AtListItem className='list-text' hasBorder={false} title='所患疾病：骨质疏松'  />
              <AtListItem className='list-text' hasBorder={false} title='病情描述：走路感觉很不稳，有疼痛感'  />
            </AtList> 
            <AtList className='list-box' hasBorder={false}>
              <AtListItem className='list-text' hasBorder={false} title='王** 广东梅州 ' />
              <AtListItem className='list-text' hasBorder={false} title='所患疾病：骨质疏松'  />
              <AtListItem className='list-text' hasBorder={false} title='病情描述：走路感觉很不稳，有疼痛感'  />
            </AtList> 
            <AtList className='list-box' hasBorder={false}>
              <AtListItem className='list-text' hasBorder={false} title='王** 广东梅州 ' />
              <AtListItem className='list-text' hasBorder={false} title='所患疾病：骨质疏松'  />
              <AtListItem className='list-text' hasBorder={false} title='病情描述：走路感觉很不稳，有疼痛感'  />
            </AtList>
        </AtCard>
        <View className='blank-box'></View>
        <View className='btn-box'><AtButton full className='next-btn' onClick={this.onClick.bind(this)}>去挂号</AtButton></View>
        <AtFloatLayout isOpened={this.state.isOpened} title="请选择就诊时间" >
        <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
        <AtTabsPane current={this.state.current} index={0} >
             <AtList  hasBorder={false}>
              <AtListItem onClick={this.zhifu}  title='上午' note='特需医疗门诊' extraText='预约' arrow='right' />
              <AtListItem onClick={this.zhifu}  title='下午'  extraText='未开通' arrow='right'  />
            </AtList> 
        </AtTabsPane>
        <AtTabsPane current={this.state.current} index={1}>
            <AtList  hasBorder={false}>
              <AtListItem onClick={this.zhifu}  title='上午' note='特需医疗门诊' extraText='预约' arrow='right' />
              <AtListItem onClick={this.zhifu}  title='下午'  extraText='预约' arrow='right'  />
            </AtList> 
        </AtTabsPane>
        <AtTabsPane current={this.state.current} index={2}>
            <AtList  hasBorder={false}>
              <AtListItem onClick={this.zhifu}  title='上午' note='特需医疗门诊' extraText='预约' arrow='right' />
              <AtListItem onClick={this.zhifu}  title='下午'  extraText='预约' arrow='right'  />
            </AtList> 
        </AtTabsPane>
      </AtTabs>
        </AtFloatLayout>
      </View>
    )
  }
}

